<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>模板可视化设计</title>
    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
    <!-- overrides to base library -->
    <link rel="stylesheet" type="text/css" href="../extjs/portal.css" />
    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../extjs/ext-jquery-adapter.js"></script>
    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="../extjs/ext-all.js"></script>
    <!-- overrides to base library -->
    <!-- extensions -->
    <script type="text/javascript" src="../extjs/ux/Portal.js"></script>
    <script type="text/javascript" src="../extjs/ux/PortalColumn.js"></script>
    <script type="text/javascript" src="../extjs/ux/Portlet.js"></script>

    <!-- page specific -->
	<script type="text/javascript" src="../extjs/portal-init.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    // create some portlet tools using built in Ext tool ids
    var tools = [{
        id:'gear',
        handler: function(){
            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
    },{
        id:'close',
        handler: function(e, target, panel){
            panel.ownerCt.remove(panel, true);
        }
    }];

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
        	region:'north',
        	height: 35,
        	minHeight: 35,
        	margins:'5 5 0 5',
			items:[/*{
				width:200,
				html: $('#template_list').html()
				},*/
				{
				xtype:'button',
				cls:'control_button',
                text : '分析模板',
                handler : save
               },
				{
				xtype:'button',
				cls:'control_button',
                text : '保存设置',
                handler : save
               },{
				xtype:'button',
				cls:'control_button',
                text : '预览',
                handler : preview
               }
			]
        	},{
            region:'west',
            id:'west-panel',
            title:'控制面板',
            split:true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins:'5 0 5 5',
            cmargins:'5 5 5 5',
            layout:'accordion',
            layoutConfig:{
                animate:true
            },
            items: [{
                html: $('#library_list').html(),
                title:'内容块',
                autoScroll:true,
                border:false,
                iconCls:'nav'
            },{
                title:'属性',
                html: Ext.example.shortBogusMarkup,
                border:false,
                autoScroll:true,
                iconCls:'settings'
            }]
        },{
            xtype:'portal',
            region:'center',
            margins:'5 5 5 0',
            items:[{
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{foreach from=$region_left_options item=library key=lib_name}{
                	id: '{$lib_name}',
                    title: '{$library.desc}',
                    tools: tools,
                    html: '{$library.library}'
                },{/foreach}{ hidden : true }]
            },{
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{foreach from=$region_center_options item=library key=lib_name}{
                	id: '{$lib_name}',
                    title: '{$library.desc}',
                    tools: tools,
                    html: '{$library.library}'
                },{/foreach}{ hidden : true }]
            },{
                columnWidth:.33,
                style:'padding:10px',
                items:[{foreach from=$region_right_options item=library key=lib_name}{
                	id: '{$lib_name}',
                    title: '{$library.desc}',
                    tools: tools,
                    html: '{$library.library}'
                },{/foreach}{ hidden : true }]
            }]
            
            /*
             * Uncomment this block to test handling of the drop event. You could use this
             * to save portlet position state for example. The event arg e is the custom 
             * event defined in Ext.ux.Portal.DropZone.
             */
            /*,listeners: {
                'drop': function(e){
                	var region_value='';
                    //Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + e.columnIndex + '<br />Position: ' + e.position);
                }
            }*/
        }]
    });
    
    //保存
	function save(){
		var region_value='';
		var result=[];
		var portal=viewport.getComponent(2);
		//var portal=viewport.items[1];
		var items=portal.items;
		for(var i=0;i<items.getCount();i++){
			var c=items.get(i);
			var j=0;
			c.items.each(function(portlet){
			//$.each(c.items,function(j,portlet){
				if(i==0){
					region_value='左边区域';
				}else if(i==1){
					region_value='中间区域';
			    }else{
					region_value='右边区域';
				}
				var o={ id:portlet.getId(),col:region_value,index:j };
				$('#regions_'+o.id).val(region_value);
				$('#sort_order_'+o.id).val(o.index);
				j++;
			});
	   }
	   $('#saveForm').submit();
	}
	
	//预览
	function preview(){
	
	}

});
</script>
</head>
<body>
<div id="template_list" style="display:none">
  <form method="post" action="template_portal.php">
  {$lang.select_template}
  <select name="template_file">
    {html_options options=$lang.template_files selected=$curr_template_file}
  </select>
  <input type="submit" value="{$lang.button_submit}" class="button" />
  <input type="hidden" name="act" value="setup" />
  </form>
</div>
<div id="library_list" style="display:none">
<!-- start template options list -->
<div class="module_list">
	<ul>
	{foreach from=$temp_options item=library key=lib_name}
		{if $library.editable neq 1}
			<li>{$library.desc}</li>
		{/if}
	{/foreach}
  	</ul>
</div>
<!-- end template options list -->
</div>
<div id="save_form">
	<form id="saveForm" name="saveForm" method="post" action="template.php">
		<input type="hidden" name="act" value="setting" />
		<input type="hidden" name="template_file" value="{$curr_template_file}" />
	{foreach from=$temp_options item=library key=lib_name}
  		<input type="hidden" id="regions_{$lib_name}" name="regions[{$lib_name}]" value=""/>
		<input type="hidden" id="sort_order_{$lib_name}" name="sort_order[{$lib_name}]" value=""/>
		<input type="hidden" id="map_{$lib_name}" name="map[{$lib_name}]" value="{$library.library}" />
		<input type="hidden" id="number_{$lib_name}" name="number[{$lib_name}]" value="{$library.number}" />
		<input type="hidden" id="display_{$lib_name}" name="display[{$lib_name}]" value="1" />
	{/foreach}
	</form>
</div>
</body>
</html>